<%--普通用户注册页面--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/login.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <link href="/static/layui/css/layui.css">

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/static/layui/layui.js" charset="utf-8"></script>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
</head>

<body class="login-bg">
<div class="login layui-anim layui-anim-up">
    <div class="message">图书馆系统 - 用户注册</div>
    <div id="darkbannerwrap"></div>
    <div align="center"><p style="color: red; font-size: 17px; font-weight: bold"></p></div>
    <form method="post" class="layui-form" action="/register" onsubmit="return toSubmit()">
        <%--设置隐藏文本框，用于接收当前页面是用户登录页还是管理员登录页--%>
        <input name="loginType" type="text" hidden="hidden" value="0">
        <input id="username" name="username" placeholder="用户名" type="text" lay-verify="required" class="layui-input">
        <%--用于在没有填写时提示用户--%>
        <div id="usernamePrompt" hidden="hidden" style="color: red">用户名不可为空</div>
        <hr class="hr15" style="background: none">
        <input id="email" name="email" placeholder="邮箱" type="text" lay-verify="required" class="layui-input">
        <%--用于在没有填写时提示用户--%>
        <div id="emailPrompt" hidden="hidden" style="color: red">邮箱不可为空</div>
        <hr class="hr15" style="background: none">
        <input id="password" name="password" lay-verify="required" placeholder="密码" type="password"
               class="layui-input" value="123">
        <%--用于在没有填写时提示用户--%>
        <div id="passwordPrompt" hidden="hidden" style="color: red">密码不可为空</div>
        <hr class="hr15" style="background: none">
        <%-- onblur:输入框失去焦点时, onfocus:输入框获得焦点时 --%>
        <input id="repassword" name="repassword" lay-verify="required" placeholder="确认密码" type="password"
               class="layui-input"
               onblur="validate()">
        <%--用于在确认密码与密码不一致时提示用户--%>
        <div id="prompt" hidden="hidden" style="color: red"></div>
        <hr class="hr15" style="background: none">
        <input id="phone" name="phone" placeholder="手机号码" type="text" lay-verify="required" class="layui-input">
        <%--用于在没有填写时提示用户--%>
        <div id="phonePrompt" hidden="hidden" style="color: red">手机号码不可为空</div>
        <hr class="hr15" style="background: none">
        <input name="authcode" placeholder="验证码" type="text" width="200px" lay-verify="required">
        <hr class="hr15" style="background: none">
        <img id="kaptcha" width="200px" height="50px">
        <a href="javascript:;"
           onclick="document.getElementById('kaptcha').src='/code?' + (new Date()).getTime() ">换一张</a> <br><br>
        <input id="register" value="注册" lay-submit lay-filter="login" style="width:100%;" type="submit"> <br>
        <hr class="hr20" style="background: none">
        已有账户？点击<a href="/index.jsp" style="color: blue">登录</a>
        <hr class="hr20" style="background: none">
    </form>
</div>
<script>
    /*检验确认密码和密码是否一致*/
    function validate() {
        let password = document.getElementById("password").value;
        let repassword = document.getElementById("repassword").value;
        let prompt = document.getElementById("prompt");
        if (password == repassword) {
            console.log("两次密码一致")
            prompt.hidden = true
        } else {
            prompt.innerHTML = "两次输入的密码不一致"
            prompt.hidden = false
        }
    }

    /*在提交表单时判断各种信息是否填写*/
    function toSubmit() {
        var username = document.getElementById("username").value;
        var email = document.getElementById("email").value;
        var password = document.getElementById("password").value;
        var repassword = document.getElementById("repassword").value;
        var phone = document.getElementById("phone").value;
        /*判断输入框信息是否为空*/
        if (username == "" || email == "" || password == "" || repassword == "" || phone == "") {
            if (username == "") {
                document.getElementById("usernamePrompt").hidden = false
            } else {
                document.getElementById("usernamePrompt").hidden = true
            }
            if (email == "") {
                document.getElementById("emailPrompt").hidden = false
            } else {
                document.getElementById("emailPrompt").hidden = true
            }
            if (password == "") {
                document.getElementById("passwordPrompt").hidden = false
            } else {
                document.getElementById("passwordPrompt").hidden = true
            }
            if (repassword == "") {
                document.getElementById("prompt").innerHTML = "确认密码不可为空"
                document.getElementById("prompt").hidden = false
            } else {
                document.getElementById("prompt").hidden = true
            }
            if (phone == "") {
                document.getElementById("phonePrompt").hidden = false
            } else {
                document.getElementById("phonePrompt").hidden = true
            }
            return false
        }
        return true
    }
</script>

</body>
</html>